<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html>
  <head>  
  <!-- angularjs -->
  <script type="text/javascript" src="${contextPath }/theme/default/js/angular.js"></script>  
  </head>
  <body >	
    <h3>组件库</h3>
    <!-- 高度不固定的缩略图效果不好，改用列表形式 -->
    <div id="portfoliolist" ng-controller="PortletAddCtrl">      
      <c:forEach items="${portletMetas }" var="row">
        <div class="portfolio" style="display: inline-block; opacity: 1;">
         <div class="portfolio-wrapper">
            <a href="#"><img src="${contextPath }/static/modules/${row.uid }-thumb.png"></a>
            <div class="portfolio-content">                
                <h2>${row.name }</h2>
                <p>${row.descr }</p>
                <button type="button" class="btn btn-add" ng-click="addPortlet('${row.uid }');">添加</button>
            </div>
          </div>
        </div>
      </c:forEach>   
      
      <!-- add-portlet-dialog -->
<div id="add-portlet-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="width: 60%;margin-left: -30%;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3><s:message code="userPortlet.ui.dialog.add" /></h3>
  </div>
  <div class="modal-body">
    <div class="control-group">
      <label class="control-label"><s:message code='userPortlet.name' /></label>
      <div class="controls">              
        <input type="text" name="name" ng-model="name" value=""/>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label"><s:message code='userPortlet.refreshInterval' /></label>
      <div class="controls">              
        <input type="text" name="refreshInterval" ng-model="refreshInterval" value=""/>
        <span class="help-block"><s:message code='userPortlet.refreshInterval.help' /></span>
      </div>
    </div>    
    <div class="control-group" ng-repeat="row in portletMeta.params">
      <label class="control-label">{{row.name}}</label>
      <div class="controls">              
        <input type="text" name="{{row.name}}" class="params" ng-model="row.value" value=""/>
      </div>
    </div>   
  </div>  
  <div class="modal-footer">
    <button type="button" class="btn" data-dismiss="modal" aria-hidden="true"><s:message code="btn.cancel" /></button>
    <button type="button" class="btn btn-primary" ng-click="confirmAdd();"><s:message code="btn.save" /></button>
  </div>
</div>        
    </div>

<script type="text/javascript">
$(document).ready(function(){  
  
  angular.element(document).ready(function() {	
    initAngularjs();
  });
});

function PortletAddCtrl($scope, $http) {
  $scope.uid = null;
  $scope.name = null;
  $scope.refreshInterval = null;
  $scope.portletMeta = null;
  
  $scope.addPortlet = function(uid) {
    $scope.uid = uid;    
    $http.get('getMeta.json', {
  	  params: {
  	    "uid": uid
  	  }
  	}).success(function(data) {
  	  $scope.portletMeta = data.portletMeta;
  	  $scope.name = $scope.portletMeta.name;
  	  $('#add-portlet-modal').modal();
  	}); 
  }
  
  $scope.confirmAdd = function() {
    var params = {};
    params["uid"] = $scope.uid;
    params["name"] = $scope.name;
    params["refreshInterval"] = $scope.refreshInterval;
    $.each($scope.portletMeta.params, function(i, o){
      params[o.name] = o.value;
    });
    
    $http.post("save.json", params).success(function(data) {
      location.href = "index.do";
    });   
  }
}

</script>   
  </body>
</html>
